<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>管理员</title>
  <meta name="description" content="极客健康">
  <meta name="keywords" content="极客健康">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../js/element-ui/index.css">
<!--  <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">-->
  <style>
    .header{
      width: 1000px;
      height: 30px;
      /* position:  absolute;
      left: 200px;
      display: flex;
      justify-content: space-between; */

    }

    .search {
      width: 200px;
      height: 30px;
      border-radius: 18px;
      outline: none;
      background-color: white;

      border: 1px solid #ccc;
      padding-left: 20px;
      right:400px;
      top: 10px;
      position: absolute;
    }

    .btn {
      height: 30px;
      width: 30px;
      position: absolute;
      background: url("../image/search.png") no-repeat ;
      top: 16px;
      right: 405px;
      border: none;
      outline: none;
      cursor: pointer;
    }

    span{
      float: left;
    }

    .login{
      width: 200px;
      height: 30px;
      top: 16px;
      right: 100px;
      position: absolute;
    }

    dd>button{
      background-color: black;
      color: white;
      /*display: none;*/
    }
    /*dt>button:hover{*/
    /*    background-color: lavender;*/
    /*}*/

    #content-pane{
      height: 680px;
      width: 1300px;
      position: absolute;
      top: 60px;
      left: 145px;
    }
    a{
      text-decoration: none;
    }
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      font-style: inherit;
      width: 170px;
      height: 700px;
      position: absolute;
      top: 80px;
    }

    .el-main{
      width: 800px;
      height: 600px;
      /*background-color:gray;*/
      position: absolute;
      top: 75px;
      left: 180px;
    }
    .secondary{
      display: block;
      width: 60px;
      height: 20px;
    }

    .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
      display: none;

    }

    .el-submenu>.el-submenu__title .el-submenu__icon-arrow{
      display: none;

    }
  </style>
</head>
<body class="hold-transition skin-purple sidebar-mini">

<div class="header">
  <span> <img src="../image/logo.png">&nbsp;&nbsp;&nbsp;&nbsp;</span>
  <span style="font-size:30px ;">智&nbsp;&nbsp;慧&nbsp;&nbsp;云&nbsp;&nbsp;课&nbsp;&nbsp;堂</span>

</div>

<div class="header">

  <form action="" class="parent">

    <input type="text" class="search" placeholder="搜索">

    <input type="button"  name="" id="" class="btn">

  </form>
</div>

<div class="login">
  <span><a href="../html/Set.html" target="_blank">设置&nbsp;</a></span>
  <span><a href="../login.html" target="_blank">登录&nbsp;</a></span>
  <span><a href="../html/SignUp.html" target="_blank">注册&nbsp;</a></span>
  <span><a href="/login.html" target="_blank">退出</a></span>

  <span><img src=""></span>
</div>

<div id="app" class="w3-sidebar w3-bar-block w3-black w3-card">
  <el-container>
    <el-container>
      <el-aside width="200px">
        <el-menu default-active="1" :default-openeds="['1']">
          <el-submenu v-for="menu in menuList" :index="menu.path">
            <template slot="title">
              <a :href="menu.linkUrl" target="right">{{menu.title}}</a>
            </template>
            <template v-for="child in menu.children">
              <el-menu-item :index="child.path">
                <a :href="child.linkUrl" target="right">{{child.title}}</a>
              </el-menu-item>
            </template>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <iframe name="right" class="el-main" src="./mangerContent/home.html" width="110%" height="700px" frameborder="0"></iframe>
      </el-container>
    </el-container>
  </el-container>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../js/element-ui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data:{
      menuList:[
        {
          "path": "1",
          "title": "首页",
          "linkUrl":"mangerContent/home.html",
          "children": []
        },
        {
          "path": "2",
          "title": "用户管理",
          "children": [
            {
              "path": "/2-1",
              "title": "学生管理",
              "linkUrl":"mangerContent/studentManager.html",
              "children":[]
            },
            {
              "path": "/2-2",
              "title": "老师管理",
              "linkUrl":"mangerContent/teacherManager.html",
              "children":[]
            }
          ]
        },
        {
          "path": "3",
          "title": "投诉管理",
          "children": [
            {
              "path": "/3-1",
              "title": "未处理",
              "linkUrl":"mangerContent/notProcessed.html",
              "children":[]
            },
            {
              "path": "/3-2",
              "title": "已处理",
              "linkUrl":"mangerContent/processed.html",
              "children":[]
            },
          ]
        },
        {
          "path": "4",
          "title": "资源管理",
          "children":[
            {
              "path": "/4-1",
              "title": "视频管理",
              "linkUrl":"mangerContent/videoManager.html",
              "children":[]
            },
            {
              "path": "/4-2",
              "title": "课程管理",
              "linkUrl":"mangerContent/courseManager.html",
              "children":[]
            },
            {
              "path": "/4-1",
              "title": "专辑管理",
              "linkUrl":"mangerContent/albumManager.html",
              "children":[]
            }
          ]
        },
        {
          "path": "5",     //菜单项所对应的路由路径
          "title": "老师申请审核",     //菜单项名称
          "linkUrl":"mangerContent/InstructorRecruitment.html",
          "children":[ ]   //是否有子菜单，若没有，则为[]
        }
      ]
    }
  });
  $(function() {
    var wd = 200;
    $(".el-main").css('width', $('body').width() - wd + 'px');
  });
</script>
</html>
